<template>
<div class="demo-type">
    <el-avatar :size="60" src="/images/zyb2.jpg" @error="errorHandler">
      <img
        src="/images/zyb2.jpg"
      />
    </el-avatar>
  </div>
  <p class="mi">何咕噜啾咪></p>
  <p class="id">ID:158894566</p>
  <!--  -->
  <el-row :gutter="100">
  <el-col :span="100"><router-link to="/deng"><el-link type="deng" class="zhu">登录/注册</el-link></router-link></el-col>
  </el-row>
  <hr>
  <!--  -->
  <div class="avatar-container1">
   <p class="five">5</p>
   <span class="shou">我的收藏</span>
  </div>
  <div class="avatar-container2">
   <p class="two">201</p>
   <span class="li">历史浏览</span>
  </div>
  <div class="avatar-container3">
   <p class="one">15</p>
   <span class="guan">我的关注</span>
  </div>
  <div class="avatar-container4">
   <p class="zero">0</p>
   <span class="hong">红包卡券</span>
  </div>
  <!--  -->

  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="全部" name="first">
<div class="avi">
  <img class="imgss" src="/public/images/che.jpg" alt="">
  <p class="che">交货地阿是i哦啊等级哦i啊已收到阿萨德<br>李海娇是的哦i大家啊奥迪教师角度</p>
  <span class="qian"><strong>￥20万</strong></span>
  <p class="duo">更多</p>
  <el-button round class="lian">联系买家</el-button>
  <el-button round class="shan">删除订单</el-button>
</div>
<div class="avi">
  <img class="imgss" src="/public/images/yifu.jpg" alt="">
  <p class="che">粉红色的立刻回复刷卡机福斯达福建省冷冻机房<br>阿是复合地基喀什啊所肩负的啦</p>
  <span class="qian"><strong>￥110</strong></span>
  <p class="duo">更多</p>
  <el-button round class="lian">联系买家</el-button>
  <el-button round class="shan">删除订单</el-button>
</div>
<div class="avi">
  <img class="imgss" src="/public/images/ju1.jpg" alt="">
  <p class="che">久啊射流风机漏打卡可视对讲菲利克斯开始大姐夫<br>没有用过几次，成色完美，没有磕碰划</p>
  <span class="qian"><strong>￥9999</strong></span>
  <p class="duo">更多</p>
  <el-button round class="lian">联系买家</el-button>
  <el-button round class="shan">删除订单</el-button>
</div>
<div class="avi">
  <img class="imgss" src="/public/images/che.jpg" alt="">
  <p class="che">交货地阿是i哦啊等级哦i啊已收到阿萨德<br>李海娇是的哦i大家啊奥迪教师角度</p>
  <span class="qian"><strong>￥20万</strong></span>
  <p class="duo">更多</p>
  <el-button round class="lian">联系买家</el-button>
  <el-button round class="shan">删除订单</el-button>
</div>
    </el-tab-pane>

    <!--  -->
    <el-tab-pane label="待付款" name="second">
      <el-empty
    image="/images/yu.png"
  />
  <p class="cai" >猜你喜欢</p>
  <el-container>
      <Mycard title1="汽车" title2="二手车低价售卖,2015年买的，买了新车现在不想要了" img="/images/che.jpg"content1="￥:20万"content2="kfznhcjk:"style="background-color: #fff"/>
      <Mycard title1="篮球" title2="新买的篮球，没有打几下，准备掉了" img="/images/qiu.jpg"content1="￥:15"content2="fhaksjdola:"style="background-color: #fff"/>
      <Mycard title1="化妆品" title2="蜜丝婷的气垫，低价出掉，没有用几次" img="/images/ye.jpg"content1="￥:30"content2="wiqjdweqio:"style="background-color: #fff"/>
      <Mycard title1="衣服" title2="某某某牌子的衣服，没有穿几次，低价出售" img="/images/yifu.jpg"content1="￥:190"content2="poasdh:"style="background-color: #fff"/>
    </el-container>
    <el-container class="yuan">
      <Mycard title1="啾咪" title2="阿斯蒂芬还能加快速度试试佛山东水电费" img="/images/zyb.jpg"content1="￥:90"content2="jkfadshf:"style="background-color: #fff"/>
      <Mycard title1="咕噜" title2="手机电话费杰卡斯发收款就发货阿道夫" img="/images/zyb1.jpg"content1="￥:600"content2="hajkshf:"style="background-color: #fff"/>
      <Mycard title1="利好" title2="大很费劲卡萨丁阿加莎大咖说卡死建档立卡" img="/images/zyb2.jpg"content1="￥:5000"content2="ydsfbsk:"style="background-color: #fff"/>
      <Mycard title1="千纸鹤" title2="啊水电费卡健身房阿是接化发数据库" img="/images/qian.jpg"content1="￥:1128"content2="yiyangqianxi:"style="background-color: #fff"/>
    </el-container>
    <el-container class="jiu">
      <Mycard title1="赵小童" title2="销售计划大家阿是卡仕达酱克拉斯大姐夫发快递" img="/images/zyb3.jpg"content1="￥:60"content2="gsfgccjk:"style="background-color: #fff"/>
      <Mycard title1="何浩楠" title2="几十块东方闪电时间到了看风使舵第三方记录打卡" img="/images/zyb4.jpg"content1="￥:888"content2="kafdssfnas:"style="background-color: #fff"/>
      <Mycard title1="蒋敦豪" title2="大吉哦单位啊发烧了阿莎富婆金佛鄂破额卡佛配额" img="/images/zyb5.jpg"content1="￥:500"content2="dijwifeee:"style="background-color: #fff"/>
      <Mycard title1="千纸鹤" title2="阿九觉得我阿九搜怕翻看贷方金额符号哦费基尔" img="/images/zyb6.jpg"content1="￥:1020"content2="yiyangqianxi:"style="background-color: #fff"/>
    </el-container>
    </el-tab-pane>

    <!--  -->
    <el-tab-pane label="待发货" name="third">
      <el-empty
    image="/images/yu1.png"
  />
  <!--  -->
  <p class="cai" >猜你喜欢</p>
  <!--  -->
  <el-container>
      <Mycard title1="汽车" title2="二手车低价售卖,2015年买的，买了新车现在不想要了" img="/images/che.jpg"content1="￥:20万"content2="kfznhcjk:"style="background-color: #fff"/>
      <Mycard title1="篮球" title2="新买的篮球，没有打几下，准备掉了" img="/images/qiu.jpg"content1="￥:15"content2="fhaksjdola:"style="background-color: #fff"/>
      <Mycard title1="化妆品" title2="蜜丝婷的气垫，低价出掉，没有用几次" img="/images/ye.jpg"content1="￥:30"content2="wiqjdweqio:"style="background-color: #fff"/>
      <Mycard title1="衣服" title2="某某某牌子的衣服，没有穿几次，低价出售" img="/images/yifu.jpg"content1="￥:190"content2="poasdh:"style="background-color: #fff"/>
    </el-container>
    <el-container class="yuan">
      <Mycard title1="啾咪" title2="阿斯蒂芬还能加快速度试试佛山东水电费" img="/images/zyb.jpg"content1="￥:90"content2="jkfadshf:"style="background-color: #fff"/>
      <Mycard title1="咕噜" title2="手机电话费杰卡斯发收款就发货阿道夫" img="/images/zyb1.jpg"content1="￥:600"content2="hajkshf:"style="background-color: #fff"/>
      <Mycard title1="利好" title2="大很费劲卡萨丁阿加莎大咖说卡死建档立卡" img="/images/zyb2.jpg"content1="￥:5000"content2="ydsfbsk:"style="background-color: #fff"/>
      <Mycard title1="千纸鹤" title2="啊水电费卡健身房阿是接化发数据库" img="/images/qian.jpg"content1="￥:1128"content2="yiyangqianxi:"style="background-color: #fff"/>
    </el-container>
    <el-container class="jiu">
      <Mycard title1="赵小童" title2="销售计划大家阿是卡仕达酱克拉斯大姐夫发快递" img="/images/zyb3.jpg"content1="￥:60"content2="gsfgccjk:"style="background-color: #fff"/>
      <Mycard title1="何浩楠" title2="几十块东方闪电时间到了看风使舵第三方记录打卡" img="/images/zyb4.jpg"content1="￥:888"content2="kafdssfnas:"style="background-color: #fff"/>
      <Mycard title1="蒋敦豪" title2="大吉哦单位啊发烧了阿莎富婆金佛鄂破额卡佛配额" img="/images/zyb5.jpg"content1="￥:500"content2="dijwifeee:"style="background-color: #fff"/>
      <Mycard title1="千纸鹤" title2="阿九觉得我阿九搜怕翻看贷方金额符号哦费基尔" img="/images/zyb6.jpg"content1="￥:1020"content2="yiyangqianxi:"style="background-color: #fff"/>
    </el-container>
    </el-tab-pane>

    <!--  -->
    <el-tab-pane label="待收货" name="thir">
      <div class="avi">
  <img class="imgss" src="/public/images/che.jpg" alt="">
  <p class="che">交货地阿是i哦啊等级哦i啊已收到阿萨德<br>李海娇是的哦i大家啊奥迪教师角度</p>
  <span class="qian"><strong>￥20万</strong></span>
  <p class="duo">更多</p>
  <el-button round class="lian">联系买家</el-button>
  <el-button round class="shan">删除订单</el-button>
</div>
<div class="avi">
  <img class="imgss" src="/public/images/yifu.jpg" alt="">
  <p class="che">粉红色的立刻回复刷卡机福斯达福建省冷冻机房<br>阿是复合地基喀什啊所肩负的啦</p>
  <span class="qian"><strong>￥110</strong></span>
  <p class="duo">更多</p>
  <el-button round class="lian">联系买家</el-button>
  <el-button round class="shan">删除订单</el-button>
</div>
<div class="avi">
  <img class="imgss" src="/public/images/ju1.jpg" alt="">
  <p class="che">久啊射流风机漏打卡可视对讲菲利克斯开始大姐夫<br>没有用过几次，成色完美，没有磕碰划</p>
  <span class="qian"><strong>￥9999</strong></span>
  <p class="duo">更多</p>
  <el-button round class="lian">联系买家</el-button>
  <el-button round class="shan">删除订单</el-button>
</div>
    </el-tab-pane>

    <!--  -->
    <el-tab-pane label="待评价" name="fourth">
      <div class="avi">
  <img class="imgss" src="/public/images/che.jpg" alt="">
  <p class="che">交货地阿是i哦啊等级哦i啊已收到阿萨德<br>李海娇是的哦i大家啊奥迪教师角度</p>
  <span class="qian"><strong>￥20万</strong></span>
  <p class="duo">更多</p>
  <el-button round class="lian">联系买家</el-button>
  <el-button round class="shan">评价返现</el-button>
</div>
<div class="avi">
  <img class="imgss" src="/public/images/zyb.jpg" alt="">
  <p class="che">交货地阿是i哦啊等级哦i啊已收到阿萨德<br>李海娇是的哦i大家啊奥迪教师角度</p>
  <span class="qian"><strong>￥20万</strong></span>
  <p class="duo">更多</p>
  <el-button round class="lian">联系买家</el-button>
  <el-button round class="shan">评价返现</el-button>
</div>
<div class="avi">
  <img class="imgss" src="/public/images/zyb1.jpg" alt="">
  <p class="che">交货地阿是i哦啊等级哦i啊已收到阿萨德<br>李海娇是的哦i大家啊奥迪教师角度</p>
  <span class="qian"><strong>￥20万</strong></span>
  <p class="duo">更多</p>
  <el-button round class="lian">联系买家</el-button>
  <el-button round class="shan">评价返现</el-button>
</div>
    </el-tab-pane>

    <!--  -->
    <el-tab-pane label="退款中" name="four">
      <el-empty
    image="/images/yu2.png"
  />
  <!--  -->

  <p class="cai" >猜你喜欢</p>

  <!--  -->
  <el-container>
      <Mycard title1="汽车" title2="二手车低价售卖,2015年买的，买了新车现在不想要了" img="/images/che.jpg"content1="￥:20万"content2="kfznhcjk:"style="background-color: #fff"/>
      <Mycard title1="篮球" title2="新买的篮球，没有打几下，准备掉了" img="/images/qiu.jpg"content1="￥:15"content2="fhaksjdola:"style="background-color: #fff"/>
      <Mycard title1="化妆品" title2="蜜丝婷的气垫，低价出掉，没有用几次" img="/images/ye.jpg"content1="￥:30"content2="wiqjdweqio:"style="background-color: #fff"/>
      <Mycard title1="衣服" title2="某某某牌子的衣服，没有穿几次，低价出售" img="/images/yifu.jpg"content1="￥:190"content2="poasdh:"style="background-color: #fff"/>
    </el-container>
    <el-container class="yuan">
      <Mycard title1="啾咪" title2="阿斯蒂芬还能加快速度试试佛山东水电费" img="/images/zyb.jpg"content1="￥:90"content2="jkfadshf:"style="background-color: #fff"/>
      <Mycard title1="咕噜" title2="手机电话费杰卡斯发收款就发货阿道夫" img="/images/zyb1.jpg"content1="￥:600"content2="hajkshf:"style="background-color: #fff"/>
      <Mycard title1="利好" title2="大很费劲卡萨丁阿加莎大咖说卡死建档立卡" img="/images/zyb2.jpg"content1="￥:5000"content2="ydsfbsk:"style="background-color: #fff"/>
      <Mycard title1="千纸鹤" title2="啊水电费卡健身房阿是接化发数据库" img="/images/qian.jpg"content1="￥:1128"content2="yiyangqianxi:"style="background-color: #fff"/>
    </el-container>
    <el-container class="jiu">
      <Mycard title1="赵小童" title2="销售计划大家阿是卡仕达酱克拉斯大姐夫发快递" img="/images/zyb3.jpg"content1="￥:60"content2="gsfgccjk:"style="background-color: #fff"/>
      <Mycard title1="何浩楠" title2="几十块东方闪电时间到了看风使舵第三方记录打卡" img="/images/zyb4.jpg"content1="￥:888"content2="kafdssfnas:"style="background-color: #fff"/>
      <Mycard title1="蒋敦豪" title2="大吉哦单位啊发烧了阿莎富婆金佛鄂破额卡佛配额" img="/images/zyb5.jpg"content1="￥:500"content2="dijwifeee:"style="background-color: #fff"/>
      <Mycard title1="千纸鹤" title2="阿九觉得我阿九搜怕翻看贷方金额符号哦费基尔" img="/images/zyb6.jpg"content1="￥:1020"content2="yiyangqianxi:"style="background-color: #fff"/>
    </el-container>
    </el-tab-pane>
  </el-tabs>
</template>
<script setup>
import Mycard from '../components/Mycard.vue'
</script>
<style scoped>
.mi{
    margin-left: 70px;
    margin-top: -60px;
}
.id{
    margin-left: 70px;
    margin-top: -10px;
    color: darkgrey;
}
/*  */
.zhu{
  margin-left: 1100px;
  margin-top: -70px;
    color: darkgrey;
    font-size: 20px;
}

/*  */
.avatar-container1 {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  width: 100px; /* 设置容器宽度 */
  height: 100px; /* 设置容器高度 */
  display: flex;
  margin-left: 250px;
  margin-top: 20px;
  /* justify-content: center;
  align-items: center; */
}
.avatar-container2 {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  width: 100px; /* 设置容器宽度 */
  height: 100px; /* 设置容器高度 */
  display: flex;
  margin-left: 450px;
  margin-top: -100px;
  /* justify-content: center;
  align-items: center; */
}
.avatar-container3{
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  width: 100px; /* 设置容器宽度 */
  height: 100px; /* 设置容器高度 */
  display: flex;
  margin-left: 650px;
  margin-top: -100px;
  /* justify-content: center;
  align-items: center; */
}
.avatar-container4{
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  width: 100px; /* 设置容器宽度 */
  height: 100px; /* 设置容器高度 */
  display: flex;
  margin-left: 850px;
  margin-top: -100px;
  /* justify-content: center;
  align-items: center; */
}
.five{
    margin-top: 30px;
    margin-left: 40px;
    font-size: 25px;
}
.shou{
    margin-top: 65px;
    margin-left: -37px;
}
.two{
    margin-top: 30px;
    margin-left: 30px;
    font-size: 25px;
}
.li{
    margin-top: 65px;
    margin-left: -55px;
}
.one{
  margin-top: 30px;
    margin-left: 38px;
    font-size: 25px;
}
.guan{
  margin-top: 65px;
  margin-left: -48px;
}
.zero{
  margin-top: 30px;
    margin-left: 40px;
    font-size: 25px;
}
.hong{
  margin-top: 65px;
  margin-left: -35px;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 50px;
  font-weight: 700px;
  height: 400px;
}
.avi{
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  width: 1000px; /* 设置容器宽度 */
  height: 150px; /* 设置容器高度 */
  display: flex;
  /* justify-content: center; */
  /* align-items: center;  */
  margin-top: 30px;
  margin-left: 150px;
}
.imgss{
  width: 100px; /* 设置头像宽度 */
  height: 100px; /* 设置头像高度 */
  margin-left: 50px;
  margin-top: 20px;
}
.che{
  margin-top: 35px;
  margin-left: 15px;
}
.qian{
  margin-top: 50px;
  margin-left: 400px;
}
.duo{
  margin-top: 130px;
  margin-left: -850px;
  font-size: 13px;
  color: #6b778c;
}
.lian{
  margin-top: 110px;
  margin-left: 600px;
}
.shan{
  margin-top: 110px;
  margin-left: 700px;
}
/*  */
.cai{
  margin-left: 600px;
}

/*  */

.el-container{
  margin-top: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
 }
.card :deep(.el-card__body){
  display: flex;
 flex-direction: column;
 height: 120px;
 width: 50px;
 justify-content: center;
 align-items: center;
 }
 .yuan{
  margin-top: 50px;
 }
 .deng{
  padding-left: 900px;
  margin-top:-15px
 }
 .tui{
  padding-left: 950px;
  margin-top:-24px;
 }
 .jiu{
  margin-top: 50px;
 }
</style>